import { Component} from '@angular/core';
import {DataSource} from '@angular/cdk/collections'
import {HttpClient, HttpClientModule,HttpHandler,HttpHeaders} from '@angular/common/http';
import {BehaviorSubject,Observable} from 'rxjs';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';



export interface RoleElement{
  roleId:number;
  roleName:string;
  //isDelete:number;
}

// const ELEMENT_DATA:RoleElement[]=[
//   {roleId:1,roleName:'小龙',isDelete:0},
//   {roleId:2,roleName:'小黑',isDelete:0},
//   {roleId:3,roleName:'小强',isDelete:0}
// ];

//var ELEMENT_DATA:RoleElement[];
var ELEMENT_DATA:RoleElement[]=[];
 
@Component({
  selector: 'app-role',
  templateUrl: './role.component.html',
  styleUrls: ['./role.component.css']
})



export class RoleComponent {
  //ELEMENT_DATA:RoleElement[]=[];
  constructor(public http:HttpClient,private router:Router) { }
  public list:any[]=[];
  ngOnInit(){
    let api='https://localhost:44312/api/role'

    this.http.get(api).subscribe((res:any)=>{
      console.log(res);
     // ELEMENT_DATA=res;
      
      //let data = new BehaviorSubject<RoleElement[]>(this.ELEMENT_DATA);
      this.list=res;
      ELEMENT_DATA=res;
      console.log(this.list);
      //console.log(ELEMENT_DATA);
      this.dataSource=new ExampleDataSource();
      
    })
    
  }

  Btn_Edit(roleid){
    console.log(roleid);
    this.router.navigate(['/role-addor-edit-component',{id:roleid}])
  }
  Btn_Delete(roleid){
    console.log(roleid);
    let api='https://localhost:44312/api/role/'+roleid
    this.http.delete(api).subscribe((res:any)=>{
      console.log(res);
      if(res.state=1){
      }
    })
  }

  displayedColumns:string[]=['roleId','roleName','operation'];

 // ELEMENT_DATA=this.list;

  dataSource=new ExampleDataSource();
  
}
//extends  继承类的关键字符
export class ExampleDataSource extends DataSource<RoleElement> {
  /** Stream of data that is provided to the table. */
  data = new BehaviorSubject<RoleElement[]>(ELEMENT_DATA);
  /** Connect function called by the table to retrieve one stream containing the data to render. */
  connect(): Observable<RoleElement[]> {
    return this.data;
  }

  disconnect() {}
}

    

  


